<template>
   <div class="center">
       <div class="box">
           <h2>优购街后台管理平台</h2>
           <el-input placeholder="请输入用户名" v-model="username" @blur="userdata"></el-input>
           <el-input placeholder="请输入密码" v-model="pwd" type="password"></el-input>
           <el-checkbox @change="min">记住密码</el-checkbox>
           <el-button style="background-color:#1e64c3; color: #fff;" @click="toligin">登录</el-button>
       </div>
   </div>
  
</template>
<script setup>
    import { ElMessage } from 'element-plus';
    import { reactive,ref,getCurrentInstance } from 'vue';
    import { useRouter } from 'vue-router';
    var router=useRouter();
    var axios=getCurrentInstance();
    var username=ref("");
    var pwd=ref("");
    var url="http://192.168.199.11:8001/ShoppingStreet"
    let mindata=ref(false);
    var adminName=localStorage.getItem("account");
   function userdata(){
    if(username.value==adminName){
           pwd.value=localStorage.getItem("password");
     }
   }
    function min(){
       mindata.value= !mindata.value
       if(mindata.value){
        localStorage.setItem("password",pwd.value);
       
       }     
    }
    function toligin(){
            var data={
                account:username.value,
                password:pwd.value,
            }
          axios.proxy.$http.post(url+"/login/loginAdmin",data).then(function(res){
                if(res.data.data.admin.identity=='0'){
                    console.log(res);
                    var token=res.data.data.token;
                    var adminId=res.data.data.admin.adminId;
                    var adminName=res.data.data.admin.adminName;
                    var tel=res.data.data.admin.tel;
                    var account=res.data.data.admin.account;
                    var sex=res.data.data.admin.sex;
                    var shopId=res.data.data.admin.shopId;
                    var icon=res.data.data.admin.icon;
                    localStorage.setItem("adminId",adminId);
                    localStorage.setItem("adminName",adminName);
                    localStorage.setItem("account",account);
                    localStorage.setItem("tel",tel);
                    localStorage.setItem("sex",sex);
                    localStorage.setItem("shopId",shopId);
                    localStorage.setItem("icon",icon);
                    localStorage.setItem("token",token);
                    router.push({path:'/home'})
                }else if(res.data.data.admin.identity=='1'){
                    console.log(res);
                    var token=res.data.data.token;
                    var adminId=res.data.data.admin.adminId;
                    var adminName=res.data.data.admin.adminName;
                    var tel=res.data.data.admin.tel;
                    var account=res.data.data.admin.account;
                    var sex=res.data.data.admin.sex;
                    var shopId=res.data.data.admin.shopId;
                    var icon=res.data.data.admin.icon;
                    localStorage.setItem("adminId",adminId);
                    localStorage.setItem("adminName",adminName);
                    localStorage.setItem("account",account);
                    localStorage.setItem("tel",tel);
                    localStorage.setItem("sex",sex);
                    localStorage.setItem("shopId",shopId);
                    localStorage.setItem("icon",icon);
                    localStorage.setItem("token",token);
                    router.push({path:"/commer"})
                }
            })
        
        }
</script>
<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .center{
        width: 100%;
        height:100%;
        background:url(../assets/Desktop/登录.jpg);
        background-size: cover;
        background-position: center;
    }
    .box{
        width: 25%;
        height:300px;
        position: absolute;
        top:25%;
        right: 7%;
        background-color: #ffffff81;
        border-radius:10px;
        text-align: center;
    }
    h2{
        width:68%;
        height: 80px;
        margin: 0 auto;
        line-height: 80px;
    }
    .el-input{
        width: 70%;
        height: 30px;
        margin-bottom:10%;
    }
    .el-checkbox{
        display:block;
        margin-left: 50%;
        height:22px;
        font-size: 12px;
    }
    :deep(.el-checkbox__inner ){
        border:1px solid #000;
        background-color: rgba(255,255,255,0);
    }
    .el-button{
        display:block;
        width: 70%;
        height: 30px;
        margin:0 auto;
    }
   :deep(.el-input__wrapper){
    background-color: rgba(255,255,255,0);
   }
   :deep(.el-button[data-v-d0e06bca]){
    border: none;
   }
</style>
